<template>
    <div class="jiugongge">
        <div v-for="(category,index) in catalogues" class="imgStyle" :key="index" @click="toDescription(category.catalogueName,category.catalogueId)">
            <span>{{category.catalogueName}}</span>
            <img  :src="category.url">
        </div>
    </div>
</template>

<script>

import {tooUrls} from "../api/Catalogue"

export default {
    name: 'ThemeWallpaperWebJiN',
    props:{
        subdivide:{
            typeof:Array,
            required:true
        }
    },
    data() {
        return {
            catalogues:[]
        };
    },

    mounted() {
        this.tooUrl()
    },

    methods: {
        
        async tooUrl(){
           let {data}= await tooUrls({ID:this.$props.subdivide})
          
           if (data.code==200) {
                this.catalogues=data.data
           }

        
        },
         toDescription(name,ID){
            this.$router.push({
                path:"/description",
                query:{
                    descriptionName:name,
                    ID:ID
                }
            })
        }
        
    },
};
</script>

<style lang="scss" scoped>
    .jiugongge{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        .imgStyle{
            width: 33%;
            height: 100%;
            text-align: center;
            span{
                color: rgba(20, 246, 246, 0.7);
                position: absolute;
                padding-left: 15px;
                font-weight: 900;
                font-family:'STCaiyun';
                font-size: 4vh;
            }
            img{
                width: 90%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
</style>